<template>
	<div class="conmponentsheader">
		<div class="logo">
			<!-- <img src="../assets/logo.png"  /> -->
			<span>九度虚拟远程控制</span>
			
		</div>
		<div class="righttext">
			<span v-if="value" >ip:{{TextIp}}</span>
			<span v-else>ip:请输入您的ip</span>
			<div class="Linkstatus">
				当前链接状态:
				<el-switch
				  v-model="value"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  disabled
				  >
				</el-switch>
			</div>
		
			
		</div>
	</div>
	
	
	
</template>

<script>
    export default {
        name: 'Header',
        data() {
            return {
                value22: 1

            }
        },
        computed: {
            value() {
                return this.$store.state.ipTips
            },
            TextIp() {
                if (this.$store.state.ipTips) {
                    return this.$store.state.TextIp
                }

            }
        },
        mounted() {

        },
        methods: {

        }



    }
</script>



<style>
    .conmponentsheader {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* .conmponentsheader img{
		width: 30px;
		height: 30px;
	} */
    
    .logo {
        margin-left: 10px;
    }
    
    .logo span {
        color: aliceblue;
        font-size: 30px
    }
    
    .righttext {
        width: 160px;
    }
    
    .righttext span {
        color: #D8D6D6;
        font-size: 15px;
        display: block;
    }
    
    .Linkstatus {
        color: #D8D6D6;
        margin-top: 5px;
        font-size: 15px;
    }
</style>